import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { changeCId, getChannelList } from '../../store/actions/channels'

export default function Channel() {
  const dispatch = useDispatch()
  const list = useSelector((state) => state.channels.list)
  const currentId = useSelector((state) => state.channels.currentId)
  // 1. Redux 里面准备一个当前高亮的 ID
  // 2. 用循环时候的 item.id 和 Redux 中的 ID 进行比较
  // 3. 如果相等，就使用 select class
  // 4. 点击的时候，改变 Redux 中的 ID 为当前点击的 ID
  const handleChangeCid = (id) => () => dispatch(changeCId(id))
  useEffect(() => {
    dispatch(getChannelList())
  }, [dispatch])
  return (
    <ul className='catagtory'>
      {list.map((item) => (
        <li
          key={item.id}
          className={item.id === currentId ? 'select' : ''}
          onClick={handleChangeCid(item.id)}
        >
          {item.name}
        </li>
      ))}
    </ul>
  )
}
